<template>
    <view>
<<<<<<< HEAD
        <lyy-table headerFixed :contents="contents" :columnFixed="1" :headers="headers" :totalRow="totalRow"
=======
        <lyy-table headerFixed :contents="contents" firstColumnFixed :headers="headers" :totalRow="totalRow"
>>>>>>> 1d130b6c02975a6aad5a2be40a700e8aa57e9f06
            @rowClick="rowClick" @onPullup="pullup"></lyy-table>
    </view>
</template>

<script>
    export default {
        name: "btable",
        data() {
            return {
                loading: false,
                totalRow: ['sales', 'orders', 'saleroom','sales_task_p', 'gross', 'test2'],
                headers: [{
                    label: '排名',
                    key: 'rank',
                    width: this.upx2px(100)
                }, {
                    label: '姓名',
                    key: 'name',
                    width:  this.upx2px(150)
                }, {
                    label: '部门',
                    key: 'dept',
                    width:  this.upx2px(200)
                }, {
                    label: '销量',
                    key: 'sales',
                    width:  this.upx2px(200),
                    sort: true
                }, {
                    label: '销量完成率',
                    key: 'sales_task_p',
                    width:  this.upx2px(200),
                    sort: true,
                    format: {
                        type: 'progress',
                        keys: ['sales', 'sales_task'],
                        template: '{0}/{1}*100'
                    }
                }, {
                    label: '订单',
                    key: 'orders',
                    width:  this.upx2px(200),
                    sort: true
                }, {
                    label: '销售额',
                    key: 'saleroom',
                    width:  this.upx2px(200),
                    sort: true
                }, {
                    label: '毛利',
                    key: 'gross',
                    width:  this.upx2px(200),
                    sort: true
                }, {
                    label: 'string格式化',
                    key: 'test1',
                    width:  this.upx2px(200),
                    format: {
                        type: 'string',
                        keys: ['name', 'dept'],
                        template: '{0}--{1}'
                    }
                }, {
                    label: '计算格式化',
                    key: 'test2',
                    width:  this.upx2px(200),
                    sort: true,
                    format: {
                        type: 'compute',
                        keys: ['orders', 'sales'],
                        template: '{0}*{1}'
                    }
                }, {
                    label: 'html普通格式化',
                    key: 'test3',
                    width:  this.upx2px(200),
                    format: {
                        type: 'html',
                        keys: ['name', 'dept'],
                        template: '<span><h1>{0}</h1>{1}</span>'
                    }
                }, {
                    label: 'html条件格式化',
                    key: 'test4',
                    width:  this.upx2px(200),
                    format: {
                        type: 'html',
                        keys: ['orders'],
                        template: function(e) {
                            if (e[0] > 1) {
                                return '<p style="color:red">' + e[0] + '</p>'
                            } else return '<p style="color:green">' + e[0] + '</p>'
                        }
                    }
                }],
                contents: [{
                        "rank": 1,
                        "id": 10000,
                        "name": "张三",
                        "dept": "销售一部",
                        "sales": 26,
                        'sales_task': 100,
                        "orders": 2,
                        "saleroom": 2050000,
                        "gross": 240002
                    },
                    {
                        "rank": 2,
                        "id": 10002,
                        "name": "王五",
                        "dept": "销售一部",
                        "sales": 25,
                        'sales_task': 100,
                        "orders": 2,
                        "saleroom": 1530000,
                        "gross": 232001
                    },
                    {
                        "rank": 3,
                        "id": 10004,
                        "name": "小明",
                        "dept": "销售二部",
                        "sales": 50,
                        'sales_task': 120,
                        "orders": 2,
                        "saleroom": 1200000,
                        "gross": 130000
                    },
                    {
                        "rank": 4,
                        "id": 10001,
                        "name": "李四",
                        "dept": "销售二部",
                        "sales": 43,
                        'sales_task': 120,
                        "orders": 1,
                        "saleroom": 1100000,
                        "gross": 80001
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    },
                    {
                        "rank": 5,
                        "id": 10003,
                        "name": "小红",
                        "dept": "销售三部",
                        "sales": 19,
                        'sales_task': 80,
                        "orders": 1,
                        "saleroom": 200000,
                        "gross": 23334
                    }
                ],
            }
        },
        methods: {
            upx2px(value) {
                //#ifndef MP-WEIXIN
                return uni.upx2px(value) + 'px'
                //#endif
                //#ifdef MP-WEIXIN
                return uni.upx2px(value)
                //#endif
            },
            rowClick(e) {
                console.log(e)
            },
            pullup(){
                console.log('上拉')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .uni-progress {
        color: red;

        /deep/ .uni-progress-info {
            font-size: 10px !important;
        }
    }
</style>
